<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业职员管理系统 - 修改密码</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #3498db;
            --secondary: #2ecc71;
            --dark: #2c3e50;
            --light: #f8f9fa;
            --gray: #7f8c8d;
            --border: #e0e0e0;
            --card-bg: rgba(255, 255, 255, 0.95);
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
            --error: #e74c3c;
            --success: #2ecc71;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
            padding: 20px;
        }

        .password-container {
            background: var(--card-bg);
            padding: 40px;
            border-radius: 20px;
            box-shadow: var(--shadow);
            width: 100%;
            max-width: 500px;
            transition: transform 0.4s, box-shadow 0.4s;
            position: relative;
            overflow: hidden;
        }

        .password-container:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
        }

        .password-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
            background-size: 200% 200%;
            animation: gradientBar 3s ease infinite;
        }

        @keyframes gradientBar {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .logo i {
            font-size: 2.8rem;
            color: var(--dark);
            margin-bottom: 15px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo h2 {
            color: var(--dark);
            font-weight: 700;
            font-size: 1.8rem;
            margin: 5px 0;
        }

        .logo p {
            color: var(--gray);
            font-size: 1.1rem;
            margin-top: 5px;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            color: var(--dark);
            font-weight: 500;
            font-size: 1rem;
        }

        .input-icon {
            position: relative;
        }

        .input-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
            font-size: 1.1rem;
        }

        input {
            width: 100%;
            padding: 14px 15px 14px 45px;
            border: 2px solid var(--border);
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s;
            background: #fff;
        }

        input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        input.error {
            border-color: var(--error);
        }

        input.success {
            border-color: var(--success);
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
            cursor: pointer;
            font-size: 1.1rem;
        }

        .submit-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 15px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .captcha-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }

        .captcha-input {
            flex: 1;
        }

        .captcha-display {
            height: 50px;
            min-width: 130px;
            font-size: 26px;
            font-weight: bold;
            letter-spacing: 5px;
            padding: 0 15px;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 10px;
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s;
        }

        .captcha-display:hover {
            transform: scale(1.05);
            background: linear-gradient(135deg, #e9ecef, #dee2e6);
        }

        .password-strength {
            font-size: 0.95rem;
            margin-top: 12px;
            display: flex;
            align-items: center;
            height: 24px;
        }

        .strength-indicator {
            display: inline-block;
            width: 100px;
            height: 6px;
            border-radius: 3px;
            background: #e0e0e0;
            margin-left: 10px;
            position: relative;
            overflow: hidden;
        }

        .strength-indicator::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0;
            background: var(--error);
            transition: width 0.3s, background 0.3s;
        }

        .strength-low::after {
            width: 33%;
            background: var(--error);
        }

        .strength-medium::after {
            width: 66%;
            background: #f39c12;
        }

        .strength-high::after {
            width: 100%;
            background: var(--success);
        }

        .requirements {
            background: #f9f9f9;
            border-left: 4px solid var(--primary);
            padding: 15px;
            border-radius: 0 8px 8px 0;
            margin-top: 20px;
            font-size: 0.9rem;
            color: var(--gray);
        }

        .requirements h4 {
            margin-bottom: 8px;
            color: var(--dark);
            font-weight: 600;
        }

        .requirements ul {
            padding-left: 20px;
        }

        .requirements li {
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }

        .requirements li i {
            margin-right: 8px;
            color: var(--success);
            font-size: 0.8rem;
        }

        .requirements li.invalid i {
            color: #ccc;
        }

        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s, top 0.3s;
            pointer-events: none;
            max-width: 500px;
            width: 90%;
        }

        .notification.show {
            top: 30px;
            opacity: 1;
        }

        .notification i {
            font-size: 24px;
            margin-right: 15px;
        }

        .notification.success i {
            color: var(--success);
        }

        .notification.error i {
            color: var(--error);
        }

        .notification .content {
            flex: 1;
        }

        .notification .title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 3px;
        }

        .notification .message {
            font-size: 14px;
            color: #555;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary);
            text-decoration: none;
            margin-top: 20px;
            font-weight: 500;
            transition: color 0.3s;
        }

        .back-link:hover {
            color: #2980b9;
            text-decoration: underline;
        }

        @media (max-width: 576px) {
            .password-container {
                padding: 30px 20px;
            }

            .captcha-container {
                flex-direction: column;
            }

            .captcha-display {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 通知组件 -->
    <div class="notification" id="notification">
        <i class="fas fa-check-circle"></i>
        <div class="content">
            <div class="title">密码修改成功</div>
            <div class="message">您的密码已成功更新，请使用新密码登录系统</div>
        </div>
    </div>

    <div class="password-container">
        <div class="logo">
            <i class="fas fa-lock"></i>
            <h2>公司职员管理系统</h2>
            <p>修改您的账户密码</p>
        </div>

        <form id="passwordForm">
            <div class="form-group">
                <label for="oldPassword">当前密码</label>
                <div class="input-icon">
                    <i class="fas fa-key"></i>
                    <input type="password"
                           id="oldPassword"
                           name="oldPassword"
                           placeholder="请输入当前密码"
                           required>
                    <span class="password-toggle" id="toggleOldPassword">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label for="newPassword">新密码</label>
                <div class="input-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password"
                           id="newPassword"
                           name="newPassword"
                           placeholder="请输入新密码"
                           required
                           minlength="6">
                    <span class="password-toggle" id="toggleNewPassword">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
                <div class="password-strength">
                    <span>密码强度：</span>
                    <span id="strength-text">无</span>
                    <div class="strength-indicator" id="strength-indicator"></div>
                </div>
            </div>

            <div class="form-group">
                <label for="confirmPassword">确认新密码</label>
                <div class="input-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password"
                           id="confirmPassword"
                           name="confirmPassword"
                           placeholder="请再次输入新密码"
                           required>
                    <span class="password-toggle" id="toggleConfirmPassword">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label>验证码</label>
                <div class="captcha-container">
                    <div class="captcha-input">
                        <div class="input-icon">
                            <i class="fas fa-shield-alt"></i>
                            <input type="text"
                                   id="captchaInput"
                                   name="captcha"
                                   placeholder="请输入验证码"
                                   required
                                   maxlength="4">
                        </div>
                    </div>
                    <div class="captcha-display" id="captchaDisplay" onclick="generateCaptcha()"></div>
                </div>
            </div>

            <button type="submit" class="submit-btn">
                <i class="fas fa-sync-alt"></i> 更新密码
            </button>

            <div style="text-align: center; margin-top: 20px;">
                <a href="#" class="back-link">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>
        </form>
    </div>

    <script>


        // 生成随机验证码
        function generateCaptcha() {
            const captchaDisplay = document.getElementById('captchaDisplay');
            const captchaInput = document.getElementById('captchaInput');

            // 生成4位随机数字验证码
            const captcha = Math.floor(1000 + Math.random() * 9000);
            captchaDisplay.textContent = captcha;
            captchaInput.value = '';
            window.currentCaptcha = captcha;
        }

        // 密码强度检测
        function checkPasswordStrength(password) {
            if (password.length === 0) return {text: '无', level: 0, valid: false};

            let strength = 0;

            // 长度评分
            if (password.length >= 6) strength += 1;
            if (password.length >= 10) strength += 1;

            const levels = [
                {text: '弱', level: 1, valid: false},
                {text: '中', level: 2, valid: true},
                {text: '强', level: 3, valid: true},
                {text: '很强', level: 4, valid: true}
            ];

            return levels[Math.min(strength, 1)];
        }

        // 更新密码要求显示
        function updateRequirementsDisplay(requirements) {
            const requirementsContainer = document.querySelector('.requirements');
            if (!requirementsContainer) return;

            // 检查长度要求
            const lengthReq = requirementsContainer.querySelector('#length-req');
            if (lengthReq) {
                lengthReq.className = requirements.length ? 'requirement' : 'requirement invalid';
            }
        }

        // 显示通知
        function showNotification(type, title, message) {
            const notification = document.getElementById('notification');
            const icon = notification.querySelector('i');

            // 设置通知内容
            notification.querySelector('.title').textContent = title;
            notification.querySelector('.message').textContent = message;

            // 设置图标和颜色
            if (type === 'success') {
                icon.className = 'fas fa-check-circle';
                notification.className = 'notification success';
            } else {
                icon.className = 'fas fa-exclamation-circle';
                notification.className = 'notification error';
            }

            // 显示通知
            notification.classList.add('show');

            // 5秒后隐藏
            setTimeout(() => {
                notification.classList.remove('show');
            }, 5000);
        }

        // 密码显示/隐藏切换
        function setupPasswordToggle(passwordId, toggleId) {
            const togglePassword = document.getElementById(toggleId);
            const passwordInput = document.getElementById(passwordId);

            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.querySelector('i').className = type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
            });
        }

        // 表单验证和提交
        document.getElementById('passwordForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = {
                oldPassword: document.getElementById('oldPassword').value,
                newPassword: document.getElementById('newPassword').value,
                confirmPassword: document.getElementById('confirmPassword').value,
                captcha: document.getElementById('captchaInput').value
            };

            // 验证码检查
            if (formData.captcha !== window.currentCaptcha?.toString()) {
                showNotification('error', '错误', '验证码错误，请重新输入');
                generateCaptcha();
                return;
            }

            // 新密码一致性检查
            if (formData.newPassword !== formData.confirmPassword) {
                showNotification('error', '密码不一致', '两次输入的新密码不匹配');
                return;
            }

            // 密码强度检查
            const strength = checkPasswordStrength(formData.newPassword);
            if (!strength.valid) {
                showNotification('error', '密码强度不足', '请设置更强的密码以满足安全要求');
                return;
            }

            // 显示提交动画
            const submitBtn = document.querySelector('.submit-btn');
            const originalHtml = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 更新中...';
            submitBtn.disabled = true;

            // 发送真实请求到后端
            fetch('api/user/change-password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    oldPassword: formData.oldPassword,
                    newPassword: formData.newPassword,
                    captcha: formData.captcha
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showNotification('success', '密码修改成功', '您的密码已成功更新，请使用新密码登录系统');

                    // 3秒后跳转到首页
                    setTimeout(() => {
                        window.location.href = '/company/index'; // 主页路径，可根据需要修改
                    }, 3000);
                } else {
                    showNotification('error', '密码修改失败', data.message || '当前密码不正确，请重新输入');
                    submitBtn.innerHTML = originalHtml;
                    submitBtn.disabled = false;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('error', '请求失败', '无法连接到服务器，请稍后再试');
                submitBtn.innerHTML = originalHtml;
                submitBtn.disabled = false;
            });
        });

        // 密码强度实时检测
        document.getElementById('newPassword').addEventListener('input', function(e) {
            const password = e.target.value;
            const strength = checkPasswordStrength(password);
            const indicator = document.getElementById('strength-indicator');

            document.getElementById('strength-text').textContent = strength.text;

            // 更新指示器样式
            indicator.className = 'strength-indicator';
            if (strength.level >= 1) indicator.classList.add('strength-low');
            if (strength.level >= 2) indicator.classList.add('strength-medium');
            if (strength.level >= 3) indicator.classList.add('strength-high');

            // 更新密码要求显示
            const requirements = {
                length: password.length > 6
            };
            updateRequirementsDisplay(requirements);
        });

        // 页面加载时初始化
        window.onload = function() {
            // 确保 DOM 加载完成后再获取元素
            setTimeout(() => {
                generateCaptcha();

                // 设置密码切换功能
                setupPasswordToggle('oldPassword', 'toggleOldPassword');
                setupPasswordToggle('newPassword', 'toggleNewPassword');
                setupPasswordToggle('confirmPassword', 'toggleConfirmPassword');

                // 初始化密码要求显示
                updateRequirementsDisplay({
                    length: false
                });
            }, 0);
        }
    </script>
</body>
</html>